<template>
	<view class="order-products panel">
		<block  v-for="(record,index) in records":key="index">
			<card-com  :show-gap="false">
				<view class="items">
					<view class="product">
						<image class="cover"  :src="record.sku.pic_url"></image>
						<view class="desc">
							<view class="desc-part1">
								<view class="name">{{ record.product.title | ellipsis(18) }}</view>
								<!-- <view>￥ {{ orderCurrentTotalAmount ? orderCurrentTotalAmount : orderTotalAmount }}</view> -->
							</view>
							<view class="sku-line">
								<view v-if ="record.attr"></view>
								<view v-else>
									<view class="sku">￥{{ record.sku.price_vip }} </view>
									<view class ="sku-x" v-if="record.number > 1" >× {{ record.number }}</view>
								</view>
							</view>
							<!-- <view class="price">
								￥ {{ orderCurrentTotalAmount ? orderCurrentTotalAmount : orderTotalAmount }}
							</view> -->
						</view>
					</view>
					<view  v-if ="record.attr"></view>
					<view class="total" v-else>￥{{ record.sku.price_vip * record.number }} </view>
				</view>
			</card-com>
		</block>
	</view>
</template>

<script>
	import store from 'store'
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "OrderProductsCom",
		props: {
		  records: {
		    type: Array,
		    default: null
		  }
		},
		store,
		computed: {
			...mapGetters([
				'user',
				'product',
				'selectedSku',
				'selectedSkuCount',
				'orderTotalAmount',
				'orderCurrentTotalAmount'
			])
		}
	}
</script>

<style lang="scss" scoped>
	.order-products {
		width:710rpx;
		border-radius:10rpx;
		.items {
			.product {
				display: flex;
				justify-content: flex-start;
				margin: 16rpx 0 0 4rpx;
				border-bottom:4rpx solid #f2f2f2;
				padding-bottom: 16rpx;
				.cover {
					display: block;
					width: 190rpx;
					height: 190rpx;
					margin-right: 20rpx;
				}
				.desc {
					font-size: 32rpx;
					color:#000;
					margin-top:20rpx;
					position:relative;
					.name {
						width: 460rpx;
						font-size: 30rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #000;
					}

					.sku {
						width: 400rpx;
						margin-top: 16rpx;
						color: #000;
						float:left;
					}
					.sku-x{
						float:right;
						margin-top: 16rpx;
						
					}

					.price {
						color: #999999;
					}
				}
			}
			.total{
				width:100%;
				text-align: right;
				padding-right:26rpx;
				margin-top:14rpx;
				font-size:32rpx;
				color:#333;
				
			}
		}
	}
	.sku-line{
		position:absolute;
		top:100rpx;
	}
	.desc-part1{
		display: flex;
		align-items: center;
		justify-content: space-between;
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			// margin-right: 20rpx;
		}
	}
</style>
